<h1>Notifications</h1>
<p>This page allows you to create and manage notifications which are shown to respective target users when they access TEAMMATES.</p>
<div id="notifications-timezone">
  <p>All dates are displayed in {{ guessTimezone }} time.</p>
</div>

<div>
  <button id="btn-add-notification" class="btn btn-success" (click)="isNotificationEditFormExpanded = true"
          [disabled]="isNotificationEditFormExpanded || isNotificationLoading">
          <span *ngIf="currentNotificationEditFormMode === NotificationEditFormMode.ADD else editbtn"><i class="fas fa-plus"></i> Add New Notification</span>
          <ng-template #editbtn><i class="fas fa-cog"></i> Edit Existing Notification</ng-template>
  </button>
</div>

<div class="margin-top-30px" *ngIf="isNotificationEditFormExpanded && !isNotificationLoading" @collapseAnim>
  <tm-notification-edit-form [formMode]="currentNotificationEditFormMode"
                             [(model)]="notificationEditFormModel"
                             [guessTimezone]="guessTimezone"
                             (addNewNotificationEvent)="addNewNotificationHandler()"
                             (editExistingNotificationEvent)="editExistingNotificationHandler()"
                             (cancelEditingNotificationEvent)="initNotificationEditFormModel()"></tm-notification-edit-form>
</div>

<tm-loading-retry [shouldShowRetry]="hasNotificationLoadingFailed" [message]="'Failed to load data'"
                  (retryEvent)="retryLoadingAllData()">
  <div class="margin-top-30px">
    <div *tmIsLoading="isNotificationLoading">
      <div class="alert alert-warning margin-top-30px" role="alert" *ngIf="notificationsTableRowModels.length === 0 && !isNotificationLoading">
        You have not created any notifications yet. Use the form above to create a notification.
      </div>

      <tm-notifications-table *ngIf = "notificationsTableRowModels.length > 0"
                              [guessTimezone]="guessTimezone"
                              [notificationsTableRowModels]="notificationsTableRowModels"
                              [notificationsTableRowModelsSortBy]="notificationsTableRowModelsSortBy"
                              [notificationsTableRowModelsSortOrder]="notificationsTableRowModelsSortOrder"
                              (deleteNotificationEvent)="deleteNotificationHandler($event)"
                              (loadNotificationEditFormEvent)="loadNotificationEditFormHandler($event)"
                              (sortNotificationsTableRowModelsEvent)="sortNotificationsTableRowModelsHandler($event)"></tm-notifications-table>
    </div>
  </div>
  <br/>
</tm-loading-retry>
